<template>
  <div :id="myId" :class="$attrs.class"></div>
</template>

<script lang="ts" setup>

import { ref, Ref, reactive, onBeforeMount, watch, toRaw, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts';

const props = defineProps<{
  myId: string;
  barTitle: title;
  barData: Array;
  barAttr: Array;
  barColor: Array;
  barXData: Array;
  layout?: string;
}>()
const optionOne = {
  title: {
    text: 'Sample Bar'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    icon: "circle",
    x: 'center',
    y: 'bottom',
    itemHeight: 8,
    itemWidth: 8,
    padding:[0,0,20,0],
  },
  xAxis: {
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
}
const optionTwo = {
  title: {
    text: 'Sample Bar'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        fontSize: 12,
        color: '#DDD'
      }
    },
    axisLabel: {
      interval:0,
    },
    data: []
  },
  yAxis: {
    type: 'value',
    splitNumber: 4,
    axisLine: {
      show: false, // 不显示坐标轴线
    },
    axisLabel: {
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    {
      data: [],
      barWidth: '20%',
      type: 'bar',
      itemStyle: {
        color: ''
      },
      label: { // 柱体上显示数值
        show: true,// 开启显示
        position: 'insideTop',// 在内部上方显示
        textStyle: {// 数值样式
          fontSize: '12px',
          color: '#FFF'
        },
        // formatter: '{c}',
        formatter:function(num) {
          if (num.value > 0) {
            return num.value
          } else {
            return '';
          }
        }
      }
    }
  ]
}
const show = () => {
  if (props.layout === 'normal') {
    optionOne.title.text = props.barTitle;
    optionOne.series = []
    props.barData.forEach((b, i) => {
      optionOne.series.push({
        name: b[props.barAttr[0]],
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: props.barColor[i] },
            { offset: 0.5, color: props.barColor[i] },
            { offset: 1, color: '#FFFFFF' }
          ])
        },
        data: b[props.barAttr[1]],
        type: 'bar',
        stack: 'x'
      })
    })
    optionOne.xAxis.data = props.barXData
    var myChart = echarts.init(document.getElementById(props.myId))
    myChart.setOption(optionOne);
  } else {
    optionTwo.title.text = props.barTitle;
    optionTwo.xAxis.data = props.barXData
    optionTwo.series[0].data = props.barData
    optionTwo.series[0].itemStyle.color = props.barColor[0]
    var myChart = echarts.init(document.getElementById(props.myId))
    myChart.setOption(optionTwo);
  }
}
// 暴露该方法便于父组件调用
defineExpose({
  show
});
// 获取数据
// const getData = () => {
//
// }
onMounted(() => {
  show()
})
// onBeforeMount(getData)
</script>
<style lang="less" scoped>

</style>
